
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>The MathJax Startup Sequence &mdash; MathJax v2.0 documentation</title>
    <link rel="stylesheet" href="_static/mj.css" type="text/css" />
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    '',
        VERSION:     '2.0',
        COLLAPSE_INDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true
      };
    </script>
    <script type="text/javascript" src="_static/jquery.js"></script>
    <script type="text/javascript" src="_static/underscore.js"></script>
    <script type="text/javascript" src="_static/doctools.js"></script>
    <!--<script type="text/javascript" src="../../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>-->
    <link rel="top" title="MathJax v2.0 documentation" href="index.html" />
    <link rel="next" title="Synchronizing your code with MathJax" href="synchronize.html" />
    <link rel="prev" title="The MathJax Processing Model" href="model.html" /> 
  </head>
  <body>
    
    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="genindex.html" title="General Index"
             accesskey="I">index</a></li>
        <li class="right" >
          <a href="synchronize.html" title="Synchronizing your code with MathJax"
             accesskey="N">next</a> |</li>
        <li class="right" >
          <a href="model.html" title="The MathJax Processing Model"
             accesskey="P">previous</a> |</li>
        <li><a href="index.html">MathJax v2.0 documentation</a> &raquo;</li> 
      </ul>
    </div>  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body">
            
  <div class="section" id="the-mathjax-startup-sequence">
<span id="startup-sequence"></span><h1>The MathJax Startup Sequence<a class="headerlink" href="#the-mathjax-startup-sequence" title="Permalink to this headline">¶</a></h1>
<p>When you load <tt class="docutils literal"><span class="pre">MathJax.js</span></tt> into a web page, it configures itself and
immediately begins loading the components it needs.  As MathJax starts
up, it uses its <a class="reference internal" href="synchronize.html#synchronization"><em>signaling mechanism</em></a>
to indicate the actions that it is taking so that MathJax extensions
can tie into the initialization process, and so other applications
within the page can synchronize their actions with MathJax.</p>
<p>The startup process performs the following actions:</p>
<ul class="simple">
<li>It creates the <tt class="docutils literal"><span class="pre">MathJax</span></tt> variable, and defines the following
subsystems:<ul>
<li><tt class="docutils literal"><span class="pre">MathJax.Object</span></tt> (object-oriented programming model)</li>
<li><tt class="docutils literal"><span class="pre">MathJax.Callback</span></tt> (callbacks, signals, and queues)</li>
<li><tt class="docutils literal"><span class="pre">MathJax.Ajax</span></tt> (file-loading and style-creation code)</li>
<li><tt class="docutils literal"><span class="pre">MathJax.HTML</span></tt> (support code for creating HTML elements)</li>
<li><tt class="docutils literal"><span class="pre">MathJax.Message</span></tt> (manages the menu line in the lower left)</li>
<li><tt class="docutils literal"><span class="pre">MathJax.Hub</span></tt> (the core MathJax functions)</li>
</ul>
</li>
</ul>
<ul class="simple">
<li>It then creates the base <tt class="docutils literal"><span class="pre">MathJax.InputJax</span></tt>,
<tt class="docutils literal"><span class="pre">MathJax.OutputJax</span></tt>, and <tt class="docutils literal"><span class="pre">MathJax.ElementJax</span></tt> objects.</li>
</ul>
<ul class="simple">
<li>MathJax sets up the default configuration, and creates the
signal objects used for the startup and hub actions.</li>
</ul>
<ul class="simple">
<li>MathJax locates the <tt class="docutils literal"><span class="pre">&lt;script&gt;</span></tt> tag that loaded the <tt class="docutils literal"><span class="pre">MathJax.js</span></tt>
file, and sets the <tt class="docutils literal"><span class="pre">MathJax.Hub.config.root</span></tt> value to reflect the
location of the MathJax root directory.</li>
</ul>
<ul class="simple">
<li>MathJax determines the browser being used and its version.  It sets
up the <tt class="docutils literal"><span class="pre">MathJax.Hub.Browser</span></tt> object, which includes the browser
name and version, plus <tt class="docutils literal"><span class="pre">isMac</span></tt>, <tt class="docutils literal"><span class="pre">isPC</span></tt>, <tt class="docutils literal"><span class="pre">isMSIE</span></tt>, and so on.</li>
</ul>
<ul class="simple">
<li>MathJax set up the <tt class="docutils literal"><span class="pre">MathJax.Hub.queue</span></tt> command queue, and
populates it with the commands MathJax runs at startup.  This
includes creating the <tt class="docutils literal"><span class="pre">MathJax.Hub.Startup.onload</span></tt> onload
handler that is used to synchronize MathJax&#8217;s action with the
loading of the page.</li>
</ul>
<p>Once the <tt class="docutils literal"><span class="pre">MathJax.Hub.queue</span></tt> is created, the following actions are
pushed into the queue:</p>
<ol class="arabic simple">
<li>Post the <tt class="docutils literal"><span class="pre">Begin</span></tt> startup signal</li>
</ol>
<ol class="arabic simple" start="2">
<li>Perform the configuration actions:<ul>
<li>Post the <tt class="docutils literal"><span class="pre">Begin</span> <span class="pre">Config</span></tt> startup signal</li>
<li>Load any configuration files specified via <tt class="docutils literal"><span class="pre">config=</span></tt> as a script parameter</li>
<li>Execute the content of the <tt class="docutils literal"><span class="pre">&lt;script&gt;</span></tt> that loaded MathJax, if it is not empty</li>
<li>Wait for the <tt class="docutils literal"><span class="pre">delayStartupUntil</span></tt> condition to be met, if one was specified</li>
<li>Execute any <tt class="docutils literal"><span class="pre">text/x-mathjax-config</span></tt> script blocks</li>
<li>load the files listed in the <tt class="docutils literal"><span class="pre">MathJax.Hub.config.config</span></tt> array</li>
<li>Post the <tt class="docutils literal"><span class="pre">End</span> <span class="pre">Config</span></tt> startup signal</li>
</ul>
</li>
</ol>
<ol class="arabic simple" start="3">
<li>Load the cookie values:<ul>
<li>Post the <tt class="docutils literal"><span class="pre">Begin</span> <span class="pre">Cookie</span></tt> startup signal</li>
<li>Load the menu cookie values</li>
<li>Use the cookie to set the renderer, if it is set</li>
<li>Post the <tt class="docutils literal"><span class="pre">End</span> <span class="pre">Cookie</span></tt> startup signal</li>
</ul>
</li>
</ol>
<ol class="arabic simple" start="4">
<li>Define the MathJax styles:<ul>
<li>Post the <tt class="docutils literal"><span class="pre">Begin</span> <span class="pre">Styles</span></tt> startup signal</li>
<li>Load the stylesheet files from the <tt class="docutils literal"><span class="pre">MathJax.Hub.config.stylesheets</span></tt> array</li>
<li>Define the stylesheet described in <tt class="docutils literal"><span class="pre">MathJax.Hub.config.styles</span></tt></li>
<li>Post the <tt class="docutils literal"><span class="pre">End</span> <span class="pre">Styles</span></tt> startup signal</li>
</ul>
</li>
</ol>
<ol class="arabic simple" start="5">
<li>Initialize the Message system (the grey information box in the
lower left)</li>
</ol>
<ol class="arabic simple" start="6">
<li>Load the jax configuration files:<ul>
<li>Post the <tt class="docutils literal"><span class="pre">Begin</span> <span class="pre">Jax</span></tt> startup signal</li>
<li>Load the jax config files from the <tt class="docutils literal"><span class="pre">MathJax.Hub.config.jax</span></tt> array<ul>
<li>The jax will register themselves when they are loaded</li>
</ul>
</li>
<li>Post the <tt class="docutils literal"><span class="pre">End</span> <span class="pre">Jax</span></tt> startup signal</li>
</ul>
</li>
</ol>
<ol class="arabic simple" start="7">
<li>Load the extension files:<ul>
<li>Post the <tt class="docutils literal"><span class="pre">Begin</span> <span class="pre">Extensions</span></tt> startup signal</li>
<li>Load the files from the <tt class="docutils literal"><span class="pre">MathJax.Hub.config.extensions</span></tt> array<ul>
<li>Most extensions will post a <tt class="docutils literal"><span class="pre">[name]</span> <span class="pre">Ready</span></tt> or <tt class="docutils literal"><span class="pre">Extension</span>
<span class="pre">[name]</span> <span class="pre">Ready</span></tt> startup message when they are loaded (where
<tt class="docutils literal"><span class="pre">[name]</span></tt> is the name of the extension)</li>
</ul>
</li>
<li>Post the <tt class="docutils literal"><span class="pre">End</span> <span class="pre">Extensions</span></tt> startup signal</li>
</ul>
</li>
</ol>
<ol class="arabic simple" start="8">
<li>Set the MathJax menu&#8217;s renderer value based on the jax that have been
loaded</li>
</ol>
<ol class="arabic simple" start="9">
<li>Wait for the onload handler to fire (in MathJax v2.0 this can
occur on the <tt class="docutils literal"><span class="pre">DOMContentLoaded</span></tt> event rather than the page&#8217;s
<tt class="docutils literal"><span class="pre">onload</span></tt> event, so processing of mathematics can start earlier)</li>
</ol>
<ol class="arabic simple" start="10">
<li>Set <tt class="docutils literal"><span class="pre">MathJax.isReady</span></tt> to <tt class="docutils literal"><span class="pre">true</span></tt></li>
</ol>
<ol class="arabic simple" start="11">
<li>Perform the typesetting pass (preprocessors and processors)<ul>
<li>Post the <tt class="docutils literal"><span class="pre">Begin</span> <span class="pre">Typeset</span></tt> startup signal</li>
<li>Post the <tt class="docutils literal"><span class="pre">Begin</span> <span class="pre">PreProcess</span></tt> hub signal</li>
<li>Run the registered preprocessors</li>
<li>Post the <tt class="docutils literal"><span class="pre">End</span> <span class="pre">PreProcess</span></tt> hub signal</li>
<li>Clear the hub signal history</li>
<li>Post the <tt class="docutils literal"><span class="pre">Begin</span> <span class="pre">Process</span></tt> hub signal</li>
<li>Process the math script elements on the page<ul>
<li>There are a number of Hub signals generated during math
processing, including a signal that a <tt class="docutils literal"><span class="pre">Math</span></tt> action is
starting (with a parameter indicating what action that is),
<tt class="docutils literal"><span class="pre">Begin</span></tt> and <tt class="docutils literal"><span class="pre">End</span> <span class="pre">Math</span> <span class="pre">Input</span></tt> messages, and <tt class="docutils literal"><span class="pre">Begin</span></tt> and
<tt class="docutils literal"><span class="pre">End</span> <span class="pre">Math</span> <span class="pre">Output</span></tt> signals.</li>
<li>Each new math element generates a <tt class="docutils literal"><span class="pre">New</span> <span class="pre">Math</span></tt> hub signal
with the math element&#8217;s ID</li>
</ul>
</li>
<li>Post the <tt class="docutils literal"><span class="pre">End</span> <span class="pre">Process</span></tt> hub signal</li>
<li>Post the <tt class="docutils literal"><span class="pre">End</span> <span class="pre">Typeset</span></tt> startup signal</li>
</ul>
</li>
</ol>
<ol class="arabic simple" start="12">
<li>Jump to the location specified in the URL&#8217;s hash reference, if
any.</li>
</ol>
<ol class="arabic simple" start="13">
<li>Initiate timers to load the zoom and menu code, if it hasn&#8217;t
already been loading in the configuration (so it will be ready
when the user needs it).</li>
</ol>
<ol class="arabic simple" start="14">
<li>Post the <tt class="docutils literal"><span class="pre">End</span></tt> startup signal</li>
</ol>
<p>The loading of the jax and extensions in steps 5 and 6 are now done in
parallel, rather than sequentially.  That is, all the jax and extensions
are requested simultaneously, so they load concurrently.  That means they
can load in any order, and that the begin and end signals for the jax and
extensions can be intermixed.  (In general, you will get <cite>Begin Jax</cite>
followed by <cite>Begin Extensions</cite>, but the order of <cite>End Jax</cite> and <cite>End
Extensions</cite> will depend on the files being loaded.)  Both 5 and 6 must
complete, however, before 7 will be performed.</p>
<p>See the <a class="reference external" href="http://cdn.mathjax.org/mathjax/latest/test/sample-signals.html">test/sample-signals.html</a> file
to see the signals in action.</p>
</div>


          </div>
        </div>
      </div>
      <div class="sphinxsidebar">
        <div class="sphinxsidebarwrapper">
  <h4>Previous topic</h4>
  <p class="topless"><a href="model.html"
                        title="previous chapter">The MathJax Processing Model</a></p>
  <h4>Next topic</h4>
  <p class="topless"><a href="synchronize.html"
                        title="next chapter">Synchronizing your code with MathJax</a></p>
<div id="searchbox" style="display: none">
  <h3>Quick search</h3>
    <form class="search" action="search.html" method="get">
      <input type="text" name="q" size="18" />
      <input type="submit" value="Go" />
      <input type="hidden" name="check_keywords" value="yes" />
      <input type="hidden" name="area" value="default" />
    </form>
    <p class="searchtip" style="font-size: 90%">
    Enter search terms or a module, class or function name.
    </p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="genindex.html" title="General Index"
             >index</a></li>
        <li class="right" >
          <a href="synchronize.html" title="Synchronizing your code with MathJax"
             >next</a> |</li>
        <li class="right" >
          <a href="model.html" title="The MathJax Processing Model"
             >previous</a> |</li>
        <li><a href="index.html">MathJax v2.0 documentation</a> &raquo;</li> 
      </ul>
    </div>
    <div class="footer">
        &copy; Copyright 2012 Design Science.
      Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0.7.
    </div>
    
  </body>
</html>